/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container-box">
		<app-head bg="#ffffff"></app-head>
		<!-- #ifndef MP-->
		<view class="container" v-if="storeList">
		<!-- #endif -->
		<!-- #ifdef MP-->
		<view class="container" v-if="storeList" :style="{marginTop:navHeight+'px'}">
		<!-- #endif -->
			<view class="login-in">
				<view class="store-list" v-for="(item,index) in storeList" :key="index">
					<view class="store-mes">
						<view class="go-store">
							<view @tap="selectStore" class="choosebox storebox"  :data-sidx="index">
								<image :src="imgUrl+'common/ischeck.png'" v-if="item.selected"></image>
								<image :src="imgUrl+'cart/nocheck.png'" role="img" v-if="!item.selected"></image>
							</view>
							<view class="store-ico">
								<image class="wh100" :src="imgUrl+'cart/carnew.png'" role="img"></image>
							</view>
							<navigator class="store-name" :url="'/pages/store/index/index?store_id='+item.store_id" role="navigation">{{item.store_name}}</navigator>
						</view>
					</view>
					<view class="order-item" v-for="(item2,cidx) in item.cart_list" :key="cidx">
						<view @tap="selectGoods" class="goods-ico" :data-sidx="index" :data-cidx="cidx" >
							<view class="choosebox storebox" >
								<image :src="imgUrl+'common/ischeck.png'" v-if="item2.selected"></image>
								<image :src="imgUrl+'cart/nocheck.png'" role="img" v-if="!item2.selected"></image>
							</view>
						</view>
						<navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item2.goods_id" role="navigation">
							<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item2.goods_id+'&width=400&height=400'" role="img"></image>
						</navigator>
						<view class="goods-cont">
							<navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item2.goods_id" role="navigation">{{item.goods_name}}</navigator>
							<view class="goods-attribute ellipsis-2">
								{{item2.spec_key_name}}
							</view>
							<view class="goods-price">
								<text class="co-red">
									￥{{item2.goods_price.toFixed(2)}}
								</text>
								<text class="market">
									￥{{item2.market_price.toFixed(2)}}
								</text>
							</view>
							<view @tap="deleteItem" class="btn-del" :data-cidx="cidx" :data-sidx="index">
								<image class="wh100" :src="imgUrl+'cart/dele.png'" role="img"></image>
							</view>
							<view class="count">
								<view @tap="subNum" class="sub" :data-cidx="cidx" :data-sidx="index">一</view>
								<input @blur="valueToNum" :data-cidx="cidx" :data-sidx="index" type="number" :value="item2.goods_num">
								</input>
								<view @tap="addNum" class="add" :data-cidx="cidx" :data-sidx="index">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-for">
				<label @tap="selectAll" class="checkbox">
					<view class="choosebox allbox">
						<image :src="imgUrl+'common/ischeck.png'" v-if="checkAllToggle"></image>
						<image :src="imgUrl+'cart/nocheck.png'" role="img" v-if="!checkAllToggle"></image>
					</view>
					全选
				</label>
				<button @tap="checkout" class="pay-btn" role="button" aria-disabled="false">立即购买</button>
				<view class="consumer">
					<view class="total">
						总计 :
						<text class="co-red">
							{{order.order_amount}}
						</text>
					</view>
					<text class="tips">
						不包含运费
					</text>
				</view>
			</view>
		</view>
		<!-- 购物车为空 -->
		<view class="no-data" v-if="!storeList">

			<image :src="imgUrl+'cart/cart-null_1.png'" class="shopcar-image" />
			<view class="no-word">你的购物车空空如也~</view>
			<navigator open-type="switchTab" url="/pages/index/index" class="lookbtn"> 去逛逛 </navigator>
		</view>
	</view>
</template>

<script>
	import {getCartList,putCartList,delShopCart} from "@/api/api.js";
	import appHead from "@/components/app-head/app-head";
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				hostUrl: config.host,
				storeList:"",//店铺列表
				checkAllToggle:false,//不全选
				num:"",//商品数量
				postData:"",
				order:"",
			}
		},
		components:{
			appHead
		},
		computed: mapState(['hasLogin','navHeight']),
		onLoad(){
			
			
		},
		onShow(){
			if(this.hasLogin){
				this.getCartList()
			}
		},
		methods:{
			/*购物车list*/
			getCartList(params){
				getCartList(params).then(res=>{
					let num=0;
					console.log(res)
					if(!res.store_cart_list || !res.store_cart_list.length){
						this.storeList=null;
						this.checkAllToggle=false;
						return;
					}
					 var checkAllToggle = true;
					for (var i = 0; i < res.store_cart_list.length; i++) {
						res.store_cart_list[i].selected = true;
						for (var j = 0; j < res.store_cart_list[i].cart_list.length; j++) {
						  // console.log(res.store_cart_list[i].cart_list[j])
							if (!res.store_cart_list[i].cart_list[j].selected) {
								res.store_cart_list[i].selected = false;
								checkAllToggle = false;
								break;
							}
						};
					}
					if(res.store_cart_list.length>0){
						this.storeList=res.store_cart_list
						this.checkAllToggle=checkAllToggle;
						this.order=res.order
					}
				})
			},
			/*店铺全选*/
			selectStore(e){
				
				/*取消店铺全选*/ 
				  var sidx = e.currentTarget.dataset.sidx;
				        var store = this.storeList[sidx];
						
				        var postData = [];
				        for (var i = 0; i < store.cart_list.length; i++) {
							console.log(store.cart_list)
								postData.push({
								    goods_num: store.cart_list[i].goods_num,
								    selected: Number(!store.selected),
								    id: store.cart_list[i].id,
								});
				        }
				        this.putCartList(JSON.stringify(postData));
			},
			/*商品选择*/ 
			selectGoods(e){
				let index=e.currentTarget.dataset.sidx; //店铺index
				let cidx =e.currentTarget.dataset.cidx //店铺 商品 index
				let store=this.storeList[index].cart_list[cidx];
				let paramsData=[];
					paramsData.push({
						"id":store.id,
						"goods_num":store.goods_num,
						"selected":Number(!store.selected)
					})
				let params=JSON.stringify(paramsData);
				
				this.putCartList(params)
				
			},
			/*全选*/
			selectAll(e){
				var paramsData = [];
				var storeList = this.storeList;
				for (var i = 0; i < storeList.length; i++) {
					for (var j = 0; j < storeList[i].cart_list.length; j++){
						paramsData.push({
							goods_num: storeList[i].cart_list[j].goods_num,
							selected: Number(!this.checkAllToggle),
							id: storeList[i].cart_list[j].id,
						})
					}
				}
				var params = JSON.stringify(paramsData);
				this.putCartList(params);
				
			},
			
			/*减*/
			subNum(e){
				let index=e.currentTarget.dataset.sidx; //店铺index
				let cidx =e.currentTarget.dataset.cidx //店铺 商品 index
				let store=this.storeList[index].cart_list[cidx];
				if(store.goods_num==1){
					return;
				}
				
				let params=JSON.stringify([
					{
						"id":store.id,
						"goods_num":store.goods_num-1
					}
				])
				// this.storeList[index].cart_list[cidx].goods_num=store.goods_num-1;
				// var order_amount=Number(this.order.order_amount) + Number(this.storeList[index].cart_list[cidx].goods_price)
				// this.order.order_amount=order_amount.toFixed(2)
				this.putCartList(params)
				
			},
			/*加*/ 
			addNum(e){
				let index=e.currentTarget.dataset.sidx; //店铺index
				let cidx =e.currentTarget.dataset.cidx //店铺 商品 index
				let store=this.storeList[index].cart_list[cidx];
				let params=JSON.stringify([
					{
						"id":store.id,
						"goods_num":store.goods_num+1
					}
				])
				
				this.putCartList(params)
				// this.storeList[index].cart_list[cidx].goods_num=store.goods_num+1;
				// var order_amount=Number(this.order.order_amount) + Number(this.storeList[index].cart_list[cidx].goods_price)
				// this.order.order_amount=order_amount.toFixed(2)
				
			},
			valueToNum(e){
				let index=e.currentTarget.dataset.sidx; //店铺index
				let cidx =e.currentTarget.dataset.cidx //店铺 商品 index
				let store=this.storeList[index].cart_list[cidx];
				let goodsnum=e.target.value;
				if(isNaN(e.detail.value) || e.target.value<1){
					return goodsnum=1;
				}else{
					goodsnum=parseInt(e.detail.value)
				}
				
				if(goodsnum==store.goods_num){
					return;
				}
				let params=JSON.stringify([
					{
						"id":store.id,
						"goods_num":e.target.value
					}
				])
				this.putCartList(params)
			},
			putCartList(params){
				putCartList(params).then(res=>{
					console.log(res)
					if(res.status!=1){
						return common.model(res.msg)
					}
					this.getCartList()
					
				})
			},
			/*删除*/
			deleteItem(e){
				var that=this;
				uni.showModal({
				    title: '确认删除!',				  
				    success: function (res) {
				        if (!res.confirm) {
				           return
				        } 
						let index=e.currentTarget.dataset.sidx; //店铺index
						let cidx =e.currentTarget.dataset.cidx //店铺 商品 index
					
						var store=that.storeList[index].cart_list[cidx];
						// if(this.storeList.lenght){

						// }
						let ids=store.id;
						that.delShopCart(ids)
				       
				    }
				});
					
				
				
			},
			delShopCart(ids){
				delShopCart(ids).then(res=>{
					console.log(res)
					if(res.status==1){
						common.toast("none","删除成功!",2000)
						this.getCartList()
					}
				})
			},
			
			/*立即购买*/ 
			checkout(){
				var hasAnySelected = false;
				var storeList = this.storeList;
				for (var i = 0; i < storeList.length; i++) {
					for (var j = 0; j < storeList[i].cart_list.length; j++) {
						if (storeList[i].cart_list[j].selected) {
							hasAnySelected = true;
							break;
						}
					}
				}
				if (!hasAnySelected) {
					common.toast("none","还没选中商品",2000)
					return;
				}
				
				uni.navigateTo({ url: '/pages/cart/cart2/cart2' });
			}
				
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}
.container-box{
	display: flex;
	height: 100%;
	align-items: center;
	/*垂直居中*/
	justify-content: center;
	/*水平居中*/
	background-color: #fff;
	// #ifdef APP-PLUS
		margin-top: var(--status-bar-height);
		// #endif
}
	.container {
		display: flex;
		height: 100%;
		align-items: center;
		/*垂直居中*/
		justify-content: flex-start;
		/*水平居中*/
		background-color: #fff;
		
	}

	.login-in {
		position: fixed;
		top: 0;
		bottom: 100rpx;
		overflow-x: hidden;
		padding-bottom: 50rpx;
		width: 100%;
		box-sizing: border-box;
		border-top: 1rpx solid #f3f3f3;
		//#ifdef H5
		// top: 88rpx;
		//#endif
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		height: 200rpx;
		padding: 10rpx 30rpx;
		border-bottom: 1px solid #f3f3f3;
		background-color: #fff;
	}

	.goods-ico {
		display: flex;
		align-items: center;
	}

	.goods-img {
		width: 180rpx;
		height: 180rpx;
		font-size: 0;
		margin-top: 10rpx;
	}

	.goods-cont {
		position: relative;
		width: 430rpx;
		height: 200rpx;
		font-size: 26rpx;
	}

	.goods-name {
		width: 430rpx;
		height: 64rpx;
		margin: 8rpx 0;
		line-height: 32rpx;
		color: #333;
	}

	.goods-attribute {
		height: 52rpx;
		line-height: 26rpx;
		font-size: 24rpx;
		color: #999;
		width: 380rpx;
	}

	.goods-price {
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
		width: 280rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999;
	}

	.btn-del {
		position: absolute;
		right: 5rpx;
		top: 88rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.count {
		position: absolute;
		right: 0;
		bottom: 5rpx;
		width: 156rpx;
		height: 45rpx;
		font-size: 24rpx;
	}

	.count>view,
	.count>input {
		float: left;
		width: 50rpx;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
	}

	.sub {
		border-right: 1px solid #f3f3f3;
		background: #f5f5f5;
		color: #999;
		font-weight: bold;
	}

	.add {
		border-left: 1px solid #f3f3f3;
		background: #f5f5f5;
		font-size: 36rpx;
		color: #999;
	}

	.pay-for {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #fff;
		//#ifdef H5
		z-index: 999;
		bottom: 100rpx;
		//#endif
	}

	.pay-for .pay-btn {
		float: right;
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #ff3b3b;
		color: #fff;
		border-radius: 0;
	}

	.pay-for .consumer {
		float: right;
		margin-right: 20rpx;
		line-height: 50rpx;
	}

	.pay-for .checkbox {
		float: left;
		padding-left: 40rpx;
		line-height: 100rpx;
		display: flex;
		align-items: center;
	}

	.pay-for .ico-check {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.store-mes {
		height: 32rpx;
		padding: 28rpx 30rpx;
		background-color: #fff;
	}

	.store-mes icon {
		margin-right: 20rpx;
	}

	.go-store {
		float: left;
		display: flex;
		height: 32rpx;
	}

	.store-ico,
	.store-arrow {
		width: 32rpx;
		height: 32rpx;
	}

	.store-name {
		font-size: 30rpx;
		padding: 0 10rpx;
		font-weight: bold;
		margin-top: -3px;
	}

	.coupon {
		float: right;
		font-size: 28rpx;
		line-height: 32rpx;
		color: #ff3b3b;
	}

	.shopcar-image {
		margin-top: 100rpx;
		width: 562rpx;
		height: 270rpx;
	}

	.lookbtn {
		width: 200rpx;
		height: 60rpx;
		background: rgba(255, 76, 76, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.no-word {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.store-list {
		margin-bottom: 10rpx;
	}

	.allbox {
		margin-right: 5rpx;
	}

	.storebox {
		margin-right: 10rpx;
		position: relative;
		top: -3rpx;
	}

	.market {
		color: #999;
		text-decoration: line-through;
		font-size: 22rpx;
		margin-left: 10rpx;
	}
</style>
